<template>
  <div>
    <!-- <Row>
      <Col span="24">
      <Card class="margin-bottom-10">
        <Input :rows="6" :cols="20" type="textarea" v-model="t" />
        <Button @click="paste">add</Button>

        <div>
          <Table :columns="pastesColumns" :data="pastesData" />
        </div>
      </Card>
      </Col>
    </Row> -->
    <Row>
      <Col span="24">
        <Card class="margin-bottom-10">
          <Form inline>
            <FormItem class="margin-bottom-0">
              <Input v-model="keywords" placeholder="单位编码"></Input>
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Button @click="search" type="primary">查询</Button>
            </FormItem>
            <!-- <FormItem class="margin-bottom-0">
              <Button :disabled="calc" @click="gen" type="primary">计算</Button>
            </FormItem> -->
          </Form>
        </Card>
      </Col>
    </Row>
    <Row>
      <Col span="24">
        <Card>
          <div>
            <Table :loading="listLoading" :columns="columnsList" :data="data" border disabled-hover>
              <template slot-scope="{ index }" slot="ID">
                {{ size * (curr - 1) + index + 1 }}
              </template>

              <!-- 行政区划编码 -->
              <template slot-scope="{ row, index }" slot="district_code">
                <Input type="text" v-model="rowdata.district_code" v-if="editIndex === index" />
                <span v-else>{{ row.district_code }}</span>
              </template>
              <!-- 行政区划名称 -->
              <template slot-scope="{ row, index }" slot="district_name">
                <Input type="text" v-model="rowdata.district_name" v-if="editIndex === index" />
                <span v-else>{{ row.district_name }}</span>
              </template>
              <!-- 单位编码 -->
              <template slot-scope="{ row, index }" slot="institutions_code">
                <Input type="text" v-model="rowdata.institutions_code" v-if="editIndex === index" />
                <span v-else>{{ row.institutions_code }}</span>
              </template>
              <!-- 单位名称 -->
              <template slot-scope="{ row, index }" slot="institutions_name">
                <Input type="text" v-model="rowdata.institutions_name" v-if="editIndex === index" />
                <span v-else>{{ row.institutions_name }}</span>
              </template>

              <!-- 科室编码 -->
              <template slot-scope="{ row, index }" slot="departments_code">
                <Input type="text" v-model="rowdata.departments_code" v-if="editIndex === index" />
                <span v-else>{{ row.departments_code }}</span>
              </template>

              <!-- 科室名称 -->
              <template slot-scope="{ row, index }" slot="departments_name">
                <Input type="text" v-model="rowdata.departments_name" v-if="editIndex === index" />
                <span v-else>{{ row.departments_name }}</span>
              </template>

              <!-- 功能分类编码 -->
              <template slot-scope="{ row, index }" slot="project_category_code">
                <Input
                  type="text"
                  v-model="rowdata.project_category_code"
                  v-if="editIndex === index"
                />
                <span v-else>{{ row.project_category_code }}</span>
              </template>

              <!-- 功能分类名称 -->
              <template slot-scope="{ row, index }" slot="project_category_name">
                <Input
                  type="text"
                  v-model="rowdata.project_category_name"
                  v-if="editIndex === index"
                />
                <span v-else>{{ row.project_category_name }}</span>
              </template>
              <!-- 项目编码 -->
              <template slot-scope="{ row, index }" slot="project_code">
                <Input type="text" v-model="rowdata.project_code" v-if="editIndex === index" />
                <span v-else>{{ row.project_code }}</span>
              </template>
              <!-- 项目名称 -->
              <template slot-scope="{ row, index }" slot="project_name">
                <Input type="text" v-model="rowdata.project_name" v-if="editIndex === index" />
                <span v-else>{{ row.project_name }}</span>
              </template>
              <!-- 功能类别编码 -->
              <template slot-scope="{ row, index }" slot="functional_category_code">
                <Input
                  type="text"
                  v-model="rowdata.functional_category_code"
                  v-if="editIndex === index"
                />
                <span v-else>{{ row.functional_category_code }}</span>
              </template>
              <!-- 功能分类名称 -->
              <template slot-scope="{ row, index }" slot="functional_category_name">
                <Input
                  type="text"
                  v-model="rowdata.functional_category_name"
                  v-if="editIndex === index"
                />
                <span v-else>{{ row.functional_category_name }}</span>
              </template>
              <!-- 功能分类编码（类） -->
              <template slot-scope="{ row, index }" slot="functional_category_code_class">
                <Input
                  type="text"
                  v-model="rowdata.functional_category_code_class"
                  v-if="editIndex === index"
                />
                <span v-else>{{ row.functional_category_code_class }}</span>
              </template>
              <!-- 功能分类名称（类） -->
              <template slot-scope="{ row, index }" slot="functional_category_name_class">
                <Input
                  type="text"
                  v-model="rowdata.functional_category_name_class"
                  v-if="editIndex === index"
                />
                <span v-else>{{ row.functional_category_name_class }}</span>
              </template>
              <!-- 功能分类编码（款） -->
              <template slot-scope="{ row, index }" slot="functional_category_code_fund">
                <Input
                  type="text"
                  v-model="rowdata.functional_category_code_fund"
                  v-if="editIndex === index"
                />
                <span v-else>{{ row.functional_category_code_fund }}</span>
              </template>
              <!-- 功能分类名称（款） -->
              <template slot-scope="{ row, index }" slot="functional_category_name_fund">
                <Input
                  type="text"
                  v-model="rowdata.functional_category_name_fund"
                  v-if="editIndex === index"
                />
                <span v-else>{{ row.functional_category_name_fund }}</span>
              </template>
              <!-- 功能分类编码（项） -->
              <template slot-scope="{ row, index }" slot="functional_category_code_item">
                <Input
                  type="text"
                  v-model="rowdata.functional_category_code_item"
                  v-if="editIndex === index"
                />
                <span v-else>{{ row.functional_category_code_item }}</span>
              </template>
              <!-- 功能分类名称（项） -->
              <template slot-scope="{ row, index }" slot="functional_category_name_item">
                <Input
                  type="text"
                  v-model="rowdata.functional_category_name_item"
                  v-if="editIndex === index"
                />
                <span v-else>{{ row.functional_category_name_item }}</span>
              </template>
              <!-- 经济分类编码 -->
              <template slot-scope="{ row, index }" slot="economics_category_code">
                <Input
                  type="text"
                  v-model="rowdata.economics_category_code"
                  v-if="editIndex === index"
                />
                <span v-else>{{ row.economics_category_code }}</span>
              </template>
              <!-- 经济分类名称 -->
              <template slot-scope="{ row, index }" slot="economics_category_name">
                <Input
                  type="text"
                  v-model="rowdata.economics_category_name"
                  v-if="editIndex === index"
                />
                <span v-else>{{ row.economics_category_name }}</span>
              </template>
              <!-- 经济分类编码（类） -->
              <template slot-scope="{ row, index }" slot="economics_category_code_class">
                <Input
                  type="text"
                  v-model="rowdata.economics_category_code_class"
                  v-if="editIndex === index"
                />
                <span v-else>{{ row.economics_category_code_class }}</span>
              </template>
              <!-- 经济分类名称（类） -->
              <template slot-scope="{ row, index }" slot="economics_category_name_class">
                <Input
                  type="text"
                  v-model="rowdata.economics_category_name_class"
                  v-if="editIndex === index"
                />
                <span v-else>{{ row.economics_category_name_class }}</span>
              </template>
              <!-- 经济分类编码（款） -->
              <template slot-scope="{ row, index }" slot="economics_category_code_fund">
                <Input
                  type="text"
                  v-model="rowdata.economics_category_code_fund"
                  v-if="editIndex === index"
                />
                <span v-else>{{ row.economics_category_code_fund }}</span>
              </template>
              <!-- 经济分类名称（款） -->
              <template slot-scope="{ row, index }" slot="economics_category_name_fund">
                <Input
                  type="text"
                  v-model="rowdata.economics_category_name_fund"
                  v-if="editIndex === index"
                />
                <span v-else>{{ row.economics_category_name_fund }}</span>
              </template>
              <!-- 总计 -->
              <template slot-scope="{ row }" slot="total">
                <span >{{ (+row.total).toFixed(2) }}</span>
              </template>
              <!-- 一般预算拨款 -->
              <template slot-scope="{ row, index }" slot="general_public_budget">
                <Input
                  type="text"
                  v-model="rowdata.general_public_budget"
                  v-if="editIndex === index"
                />
                <span v-else>{{ (+row.general_public_budget).toFixed(2) }}</span>
              </template>
              <!-- 基金预算拨款 -->
              <template slot-scope="{ row, index }" slot="government_budgets">
                <Input
                  type="text"
                  v-model="rowdata.government_budgets"
                  v-if="editIndex === index"
                />
                <span v-else>{{ (+row.government_budgets).toFixed(2) }}</span>
              </template>
              <!-- 国有资本经营预算 -->
              <template slot-scope="{ row, index }" slot="government_capital_management_budget">
                <Input
                  type="text"
                  v-model="rowdata.government_capital_management_budget"
                  v-if="editIndex === index"
                />
                <span v-else>{{ (+row.government_capital_management_budget).toFixed(2) }}</span>
              </template>
              <!-- 教育收费（财政专户） -->
              <template slot-scope="{ row, index }" slot="special_financial_account">
                <Input
                  type="text"
                  v-model="rowdata.special_financial_account"
                  v-if="editIndex === index"
                />
                <span v-else>{{ (+row.special_financial_account).toFixed(2) }}</span>
              </template>
              <!-- 事业收入 -->
              <template slot-scope="{ row, index }" slot="utility_income">
                <Input type="text" v-model="rowdata.utility_income" v-if="editIndex === index" />
                <span v-else>{{ (+row.utility_income).toFixed(2) }}</span>
              </template>
              <!-- 事业单位经营收入 -->
              <template slot-scope="{ row, index }" slot="institution_management_income">
                <Input
                  type="text"
                  v-model="rowdata.institution_management_income"
                  v-if="editIndex === index"
                />
                <span v-else>{{ (+row.institution_management_income).toFixed(2) }}</span>
              </template>
              <!-- 单位其他资金收入 -->
              <template slot-scope="{ row, index }" slot="institution_other_income">
                <Input
                  type="text"
                  v-model="rowdata.institution_other_income"
                  v-if="editIndex === index"
                />
                <span v-else>{{ (+row.institution_other_income).toFixed(2) }}</span>
              </template>
              <!-- 操作 -->
              <template slot-scope="{ row, index }" slot="action">
                <div v-if="editIndex === index">
                  <Button @click="handleSave(row, index)">保存</Button>
                  &nbsp;
                  <Button @click="editIndex = -1">取消</Button>
                </div>
                <div v-else>
                  <Button @click="handleEdit(row, index)">操作</Button>
                </div>
              </template>
            </Table>
          </div>
          <div class="pages">
            <Page
              @on-page-size-change="changSize"
              :page-size="size"
              :total="total"
              :current="curr"
              @on-change="changePage"
              show-sizer
              show-total
              :page-size-opts="[100, 200, 500, 1000]"
            ></Page>
          </div>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import { getData, updateRow, gen1 } from '@/api/budget'

export default {
  name: 'budget_thisyear',
  data () {
    return {
      pastesColumns: [],
      pastesData: [],
      t: '',
      calc: false,
      rowdata: {
        id: '',
        district_code: '',
        district_name: '',
        institutions_code: '',
        institutions_name: '',
        departments_code: '',
        departments_name: '',
        project_category_code: '',
        project_category_name: '',
        project_code: '',
        project_name: '',
        functional_category_code: '',
        functional_category_name: '',
        economics_category_code: '',
        economics_category_name: '',
        economics_category_code_class: '',
        economics_category_name_class: '',
        economics_category_code_fund: '',
        economics_category_name_fund: '',
        functional_category_code_class: '',
        functional_category_name_class: '',
        functional_category_code_fund: '',
        functional_category_name_fund: '',
        functional_category_code_item: '',
        functional_category_name_item: '',
        general_public_budget: '',
        government_budgets: '',
        government_capital_management_budget: '',
        special_financial_account: '',
        utility_income: '',
        institution_management_income: '',
        institution_other_income: ''
      },
      editIndex: -1,
      total: 0,
      curr: 1,
      size: 10,
      keywords: '',
      listLoading: false,
      columnsList: [
        { title: '序号', width: 80, slot: 'ID', align: 'center' },
        { title: '行政区划编码', slot: 'district_code', width: 150, align: 'center' },
        { title: '行政区划名称', slot: 'district_name', width: 150, align: 'center' },
        { title: '单位编码', slot: 'institutions_code', width: 100, align: 'center' },
        { title: '单位名称', slot: 'institutions_name', width: 300, align: 'center' },
        { title: '科室编码', slot: 'departments_code', width: 100, align: 'center' },
        { title: '科室名称', slot: 'departments_name', width: 250, align: 'center' },
        { title: '项目类别编码', slot: 'project_category_code', width: 100, align: 'center' },
        { title: '项目类别名称', slot: 'project_category_name', width: 150, align: 'center' },
        { title: '项目编码', slot: 'project_code', width: 220, align: 'center' },
        { title: '项目名称', slot: 'project_name', width: 300, align: 'center' },
        { title: '功能分类编码', slot: 'functional_category_code', width: 100, align: 'center' },
        { title: '功能分类名称', slot: 'functional_category_name', width: 250, align: 'center' },
        { title: '功能分类编码（类）', slot: 'functional_category_code_class', width: 80, align: 'center' },
        { title: '功能分类名称（类）', slot: 'functional_category_name_class', width: 250, align: 'center' },
        { title: '功能分类编码（款）', slot: 'functional_category_code_fund', width: 80, align: 'center' },
        { title: '功能分类名称（款）', slot: 'functional_category_name_fund', width: 250, align: 'center' },
        { title: '功能分类编码（项）', slot: 'functional_category_code_item', width: 80, align: 'center' },
        { title: '功能分类名称（项）', slot: 'functional_category_name_item', width: 250, align: 'center' },
        { title: '经济分类编码', slot: 'economics_category_code', width: 100, align: 'center' },
        { title: '经济分类名称', slot: 'economics_category_name', width: 300, align: 'center' },
        { title: '经济分类编码（类）', slot: 'economics_category_code_class', width: 80, align: 'center' },
        { title: '经济分类名称（类）', slot: 'economics_category_name_class', width: 250, align: 'center' },
        { title: '经济分类编码（款）', slot: 'economics_category_code_fund', width: 80, align: 'center' },
        { title: '经济分类名称（款）', slot: 'economics_category_name_fund', width: 250, align: 'center' },
        { title: '总计', slot: 'total', width: 150, align: 'center' },
        {
          title: '财政拨款小计',
          key: 'total',
          width: 150,
          render: (h, params) => {
            return h('div', [
              h('span', ((+params.row.general_public_budget) + (+params.row.government_budgets) + (+params.row.government_capital_management_budget) + (+params.row.special_financial_account)).toFixed(2))
            ])
          },
          align: 'center'
        },
        { title: '一般预算拨款', slot: 'general_public_budget', width: 200, align: 'center' },
        { title: '基金预算拨款', slot: 'government_budgets', width: 150, align: 'center' },
        { title: '国有资本经营预算', slot: 'government_capital_management_budget', width: 150, align: 'center' },
        { title: '教育收费（财政专户）', slot: 'special_financial_account', width: 180, align: 'center' },
        { title: '事业收入', slot: 'utility_income', width: 150, align: 'center' },
        { title: '事业单位经营收入', slot: 'institution_management_income', width: 150, align: 'center' },
        { title: '单位其他资金收入', slot: 'institution_other_income', width: 150, align: 'center' },
        { title: '操作', slot: 'action', width: 200, align: 'center' }
      ],
      data: []
    }
  },
  methods: {
    buildColumns (data, idx) {
      if (idx === 0) {
        // let columns = []
        data.map(item => {
          let column = {
            key: item,
            title: item
          }
          if (item === 'class') {
            column.rowspan = 3
            // console.log(22222)
          }
          this.pastesColumns.push(column)
        })
        // console.log(columns)
      } else {
        this.buildrow(data)
      }
    },
    buildrow (data) {
      if (data.length < 2) return false
      let o = {}
      this.pastesColumns.map((item, idx) => {
        o[item.key] = data[idx]
      })
      console.log(o)
      this.pastesData.push(o)
    },
    paste () {
      console.log(this.t)
      let pastes = this.t.split('\n')
      pastes.map((rows, idx) => {
        let row = rows.split('\t')
        // console.log(row)
        this.buildColumns(row, idx)
      })
    },
    gen () {
      this.calc = true
      gen1().then((res) => {
        let data = res.data
        console.log(data)
        this.$Message['success']({
          background: true,
          content: `成功计算 ${data.data.count} 条数据`
        })
        this.calc = false
      })
    },
    handleSave (row, index) {
      let self = this
      updateRow(this.rowdata).then((res) => {
        if (res.data.code === 1) {
          self.search()
        } else {
          self.$Message['error']({
            background: true,
            content: `数据异常，请稍后重试。`
          })
        }
      }).catch(() => {
        self.$Message['error']({
          background: true,
          content: `数据异常，请稍后重试。`
        })
      })
      this.editIndex = -1
    },
    handleEdit (row, index) {
      // console.log(row)
      // 初始化rowdata
      for (let key in this.rowdata) {
        this.rowdata[key] = row[key]
      }
      this.editIndex = index
    },
    changSize (val) {
      this.size = val
      this.search()
    },
    changePage (val) {
      this.curr = val
      this.search()
    },
    search () {
      this.listLoading = true
      let self = this
      getData({ type: 1, page: this.curr, size: this.size, keywords: this.keywords }).then(
        function (res) {
          let data = res.data
          if (data.code === 1) {
            self.data = data.data.list
            self.total = data.data.count

            self.listLoading = false
          } else {
            self.listLoading = false
            self.$Message['error']({
              background: true,
              content: `数据异常，请稍后重试。`
            })
          }
        }
      )
    }
  },
  mounted () {
    this.search()
  }
}
</script>
<style scoped>
.pages {
  width: 100%;
  height: 40px;
  margin-top: 20px;
}
</style>
